<template>
    <div class="the-header">
        <div class="header-logo" @click="goHome">
            <img class="icon" src="../assets/img/music.png">
            <span>music</span>
        </div>
        <ul class="navbar">
            <li :class="{active: item.name == activeName}" v-for="item in filteredNavMsg" :key="item.path"
                @click="goPage(item.path,item.name)">
                {{item.name}}
            </li>
            <li>
                <div class="header-search">
                    <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords"></input>
                    <div class="search-btn" @click="goSearch()">
                        <svg class="seicon">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                    </div>
                </div>
            </li>

            <li v-show="!loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path"
                @click="goPage(item.path,item.name)">
                {{item.name}}
            </li>
        </ul>
        <div class="header-right" v-show="loginIn">
            <div class="message-icon" @click="goPage('/message', '消息')">
                <i class="el-icon-message"></i>
                <span class="unread-count" v-if="unreadCount > 0">{{unreadCount}}</span>
            </div>
            <div id='user'>
                <img :src='attachImageUrl(avator)'>
            </div>
            <ul class="menu">
                <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">{{item.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {navMsg, loginMsg, menuList,} from "../assets/data/header";
    import {mapGetters} from 'vuex'
    import { getUnreadMessageCount } from '../api'

    export default {
        name: "Theheader",
        data() {
            return {
                navMsg: [],   //左侧导航栏
                keywords: '',  //搜索关键字
                loginMsg: [],   //右侧导航栏
                menuList: [], //用户下拉菜单
                unreadCount: 0,
                checkMessageTimer: null  // 用于存储定时器
            }
        },
        computed: {
            ...mapGetters([
                'activeName',
                'loginIn',
                'avator',
                'userId'
            ]),
            filteredNavMsg() {
                return this.navMsg.filter(item => !item.auth || this.userId)
            }
        },
        created() {
            this.navMsg = navMsg;
            this.loginMsg = loginMsg;
            this.menuList = menuList;
            if (this.userId) {
                this.getUnreadCount()
                // 启动定时检查
                this.startCheckMessage()
            }
            // 监听未读消息更新事件
            this.$root.$on('updateUnreadCount', () => {
                this.getUnreadCount()
            })
        },
        mounted() {
            document.querySelector('#user').addEventListener('click', function (e) {
                document.querySelector('.menu').classList.add("show");
                e.stopPropagation()           //关键在于阻止冒泡
            }, false);
            document.querySelector('.menu').addEventListener('click', function (e) {
                e.stopPropagation()           //点击菜单内部时，阻止时间冒泡，这样，点击内部时，菜单不会关闭
            }, false);
            document.addEventListener('click', function () {
                document.querySelector('.menu').classList.remove('show');
            }, false);
        },
        methods: {
            //提示信息
            notify(title,type){
                this.$notify({
                    title:title,
                    type:type
                })
            },
            goHome() {
                this.$router.push({path: ""})
            },
            goPage(path, name) {
                if (!this.loginIn && (path === '/my-music' || path === '/my-song')) {
                    this.notify('请先登录', 'warning')
                } else {
                    this.$store.commit('setActiveName', name);
                    this.$router.push({path: path});
                }
            },
            goSearch() {
                this.$router.push({path: '/search', query: {keywords: this.keywords}})
            },
            //获取图片地址
            attachImageUrl(srcUrl) {
                return srcUrl ? this.$store.state.configure.HOST + srcUrl : '../assets/img/user.jpg';
            },
            goMenuList(path) {
                if (path == 0) {  // 退出登录
                    // 清除登录状态
                    this.$store.commit('setLoginIn', false);
                    this.$store.commit('setIsActive', false);
                    this.$store.commit('setUserId', null);

                    // 清除播放状态
                    this.$store.commit('setIsPlay', false);
                    this.$store.commit('setPlayButtonUrl', '#icon-play');
                    this.$store.commit('setListOfSongs', []);
                    this.$store.commit('setUrl', '');
                    this.$store.commit('setId', '');
                    this.$store.commit('setTitle', '');
                    this.$store.commit('setArtist', '');
                    this.$store.commit('setPicUrl', '');
                    this.$store.commit('setLyric', []);
                    this.$store.commit('setCurrentTime', 0);
                    this.$store.commit('setDuration', 0);
                    this.$store.commit('setCurrentIndex', 0);

                    // 跳转到首页
                    this.$router.push('/');
                    this.notify('已退出登录', 'success');
                } else {
                    this.$router.push({path: path});
                }
            },
            async getUnreadCount() {
                try {
                    const res = await getUnreadMessageCount(this.userId)
                    if (res.code === 1) {
                        if (this.unreadCount < res.data && res.data > 0) {
                            // 如果未读消息数增加，显示提醒
                            this.$notify({
                                title: '新消息提醒',
                                message: `您有 ${res.data} 条未读消息`,
                                type: 'info',
                                duration: 3000
                            })
                        }
                        this.unreadCount = res.data
                    }
                } catch (error) {
                    console.error('获取未读消息数失败:', error)
                }
            },
            startCheckMessage() {
                // 每30秒检查一次未读消息
                this.checkMessageTimer = setInterval(() => {
                    this.getUnreadCount()
                }, 30000)
            },
            stopCheckMessage() {
                if (this.checkMessageTimer) {
                    clearInterval(this.checkMessageTimer)
                    this.checkMessageTimer = null
                }
            }
        },
        watch: {
            // 监听登录状态变化
            loginIn(newVal) {
                if (newVal && this.userId) {
                    this.getUnreadCount()
                    this.startCheckMessage()
                } else {
                    this.stopCheckMessage()
                    this.unreadCount = 0
                }
            }
        },
        beforeDestroy() {
            // 组件销毁前清除定时器
            this.stopCheckMessage()
            // 移除事件监听
            this.$root.$off('updateUnreadCount')
        }
    }

</script>

<style scoped>
    .the-header {
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        height: 70px;
        line-height: 70px;
        padding: 0 80px;
        margin: 0;
        background-color: #fefefe;
        box-sizing: border-box;
        z-index: 100;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .header-logo {
        margin: 0 10px;
        font-size: 26px;
        font-weight: bold;
        white-space: nowrap;
        cursor: pointer;
    }

    .icon {
        vertical-align: middle;
        width: 50px;
        height: 50px;
        font-size: 50px;
        color: #000000;
        fill: currentColor;
        overflow: hidden;
        position: relative;
    }

    .navbar {
        white-space: nowrap;
        height: 70px;
        margin-top: -70px;
        margin-left: 100px;
    }

    .navbar li {
        list-style: none;
        float: left;
        font-size: 18px;
        color: #67757f;
        padding: 0 10px;
        margin: 0 10px;
        text-align: center;
        border-bottom: none;
        box-sizing: border-box;
        cursor: pointer;
    }


    .header-search {
        border-radius: 5px;
    }

    .header-search input {
        height: 35px;
        width: 270px;
        font-size: 14px;
        background-color: #ebeef0;
        border: 0;
        text-indent: 10px;
    }

    .search-btn {
        background-color: #ef7089;
        width: 60px;
        height: 35px;
        cursor: pointer;
        margin-left: 340px;
        margin-top: -50px;
    }

    .seicon {
        padding-bottom: 10px;
        width: 1.2em;
        height: 1.2em;
        font-size: 1.2em;
        color: white;
        fill: currentColor;
        overflow: hidden;

    }

    .header-right {
        position: relative;

        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: -70px;
        padding-left: -200px;
        display: flex;
    }

    #user {
        overflow: hidden;
        width: 46px;
        width: 46px;
        margin: 0 25px;
        cursor: pointer;
    }

    #user img {
        width: 100%;
        border-radius: 50%;
    }

    .menu {
        display: none;
        line-height: 0px;
        position: absolute;
        background-color: white;
        -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
        width: 150px;
        padding: 7px 0px;
        border-radius: 4px;
        top: 45px;
        right: 280px;
        z-index: 5;
        text-align: center;
        cursor: pointer;
    }

    .menu li {
        display: inline-block;
        width: 100%;
        height: 40px;
        line-height: 40px;
    }

    .menu li:hover {
        background-color: #ef7089;
        color: white;
    }

    .menu:nth-child(1):before {
        content: " ";
        display: block; /*独占一行*/
        position: absolute;
        right: 45px;
        top: -5px; /*果断的露出上半部分*/
        width: 10px;
        height: 10px;
        background-color: white;
        /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
        transform: rotate(45deg);
    }

    .show {
        display: block;
    }

    .message-icon {
        position: relative;
        margin-right: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .message-icon:hover {
        transform: scale(1.1);
    }

    .message-icon i {
        font-size: 24px;
        color: #666;
    }

    .unread-count {
        position: absolute;
        top: -8px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background-color: #f56c6c;
        color: #fff;
        font-size: 12px;
        text-align: center;
        animation: bounce 1s infinite;  /* 添加动画效果 */
    }

    @keyframes bounce {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
    }
</style>
